<template>
  <div class="context">
    <!--搜索框-->
    <el-input
      style="width: 400px; margin: 20px 20px 20px 20px"
      v-model="inputValue"
      placeholder="请输入内容"
      prefix-icon="el-icon-search"
    >
    </el-input>
    <el-button
      type="primary"
      @click="toSelect"
      style="height: 40px; margin: 0px 0px 0px 20px"
    >
      立即查询</el-button
    >

    <!--编辑框-->
    <el-dialog
      title="批量添加"
      :visible.sync="dialogresetVisible"
      width="30%"
      center
    >
      <el-form :model="newtable">
        <el-form-item label="指定前缀" :label-width="formLabelWidth">
          <el-input v-model="newtable.username" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="开始序号" :label-width="formLabelWidth">
          <el-input v-model="newtable.tel" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="结束序号" :label-width="formLabelWidth">
          <el-input v-model="newtable.email" autocomplete="off"></el-input>
        </el-form-item>




      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogresetVisible = false">取 消</el-button>
        <el-button type="primary" @click="addusers">确 定</el-button>
      </div>
    </el-dialog>

    <!--添加框-->
    <el-dialog
      title="新增信息"
      :visible.sync="dialogFormVisible"
      width="30%"
      center
    >
      <el-form :model="user">
        <el-form-item label="名称" :label-width="formLabelWidth">
          <el-input v-model="user.username" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="电话" :label-width="formLabelWidth">
          <el-input v-model="user.tel" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="邮件地址" :label-width="formLabelWidth">
          <el-input v-model="user.email" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>

    <template>
      <el-table :data="tableData" style="width: 100%" height="450">
        <el-table-column label="昵称" width="">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.username }}</span>
          </template>
        </el-table-column>

        <el-table-column label="电话" width="">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.tel }}</span>
          </template>
        </el-table-column>

        <el-table-column label="邮件" width="">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.email }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot="header">
            <el-button
              type="text"
              @click="dialogFormVisible = true"
              size="small"
              >新增用户</el-button
            >
            <!-- <el-button type="success" plain @click="dialogFormVisible = true"
                >新增用户</el-button
              > -->
          </template>
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="handleEdit(scope.$index, scope.row)"
              size="small"
              >编辑</el-button
            >

            <!-- <el-button @click="handleEdit(scope.$index, scope.row)"
                >编 辑</el-button
              > -->
            <!-- <el-button
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删 除
              </el-button> -->

            <el-button
              type="text"
              @click="handleDelete(scope.$index, scope.row)"
              size="small"
              >删 除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination background layout="prev, pager, next" :total="1000">
        </el-pagination>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: null,
      user: {
        id: 0,
        username: "",
        tel: "",
        email: ""
      },
      formLabelWidth: "120px",
      dialogFormVisible: false,
      dialogresetVisible: false,
      form: {
        name: "",
        tel: "",
        email: ""
      },
      newtable: {
        username: "",
        tel: "",
        email: ""
      },

      tableData: [
        {
          id: "1",
          username: "王小虎",
          tel: "145143141",
          email: "11231234123"
        }
      ]
    };
  },
  created() {
    var that = this;
    console.log("Vue 初始化完成 created");
    this.pushdata();
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
      this.newtable = {
        id: row.id,
        username: row.username,
        email: row.email,
        tel: row.tel
      };
      this.dialogresetVisible = true;
    },
    handleDelete(index, row) {
      var that = this;
      console.log(index, row);
      this.$axios
        .post("/delete", {
          id: row.id
        })
        .then(function(response) {
          console.log(response);
          that.$message({
            message: "删除成功!",
            type: "success"
          });
          that.pushdata();
        })
        .catch(function(error) {
          console.log(error);
          that.$message({
            message: "删除失败!"
          });
        });
    },
    open1() {
      this.$message({
        message: "添加成功!",
        type: "success"
      });
    },
    open2() {
      this.$message({
        message: "添加失败"
      });
    },

    toSelect() {
      var that = this;
      this.req = {
        username: null,
        tel: null,
        email: null
      };
    },

    pushdata() {
      var that = this;
      this.$axios
        .get("/users")
        .then(function(response) {
          console.log(response.data);
          that.tableData = response.data.data;
        })
        .catch(function(error) {
          console.log(error);
          this.$message({
            message: "修改失败"
          });
        });
    },

    addusers() {
      //user 新建的对象
      var that = this;

      this.$axios
        .post("/update", {
          id: that.newtable.id,
          username: that.newtable.username,
          tel: that.newtable.tel,
          email: that.newtable.email
        })
        .then(function(response) {
          console.log(response);
          that.dialogresetVisible = false;
          that.pushdata();
          this.$message({
            message: "修改成功!",
            type: "success"
          });
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    add() {
      var that = this;

      this.$axios
        .post("/add", {
          username: that.user.username,
          tel: that.user.tel,
          email: that.user.email
        })
        .then(function(response) {
          console.log(response);
          that.dialogFormVisible = false;
          that.pushdata();
          that.open1();
        })
        .catch(function(error) {
          console.log(error);
          that.open2();
        });
    }
  }
};
</script>

<style scoped>

.context {
  position: relative;
  width: 1550px;
  height: 660px;
  margin: 20px auto;
  background-color: rgb(255 255 255);
  -webkit-box-shadow: 3px 3px 6px rgb(196, 189, 189);
  -moz-box-shadow: 3px 3px 6px rgb(196, 189, 189);
  box-shadow: 3px 3px 6px rgb(196, 189, 189);
}
</style>
